<template>
  <div>
    <header-top @searchData="LoadData"></header-top>
    <nav-bar></nav-bar>
    <three-step></three-step>
    <div class="hotel container clearfix">
      <div class="main">
        <div class="title">
          <div class="line"></div>
          <p>酒店类型</p>
          <div class="leiyao_more">
            <router-link to="/reservation">更多&gt;</router-link>
          </div>
        </div>
        <div class="tabs">
          <button @click="LoadHotel" :class="{ holtelAct: act == '全部' }">全部</button>
          <button @click="LoadHotel" :class="{ holtelAct: act == '特色餐厅' }">特色餐厅</button>
          <button @click="LoadHotel" :class="{ holtelAct: act == '奢华五星' }">奢华五星</button>
          <button @click="LoadHotel" :class="{ holtelAct: act == '豪华四星' }">豪华四星</button>
          <button @click="LoadHotel" :class="{ holtelAct: act == '婚礼堂' }">婚礼堂</button>
          <button @click="LoadHotel" :class="{ holtelAct: act == '其他酒店' }">其他酒店</button>
        </div>

        <div class="hotel-list">
          <router-link
            :to="`detail/${item.hid}`"
            class="hotel-item"
            v-for="(item, i) in results"
            :key="i"
          >
            <img :src="item.titlepicfile" alt="" />
            <div class="info">
              <p>{{ item.headline }}</p>
              <div class="site">
                <span>{{ item.genre }}</span>
                <span>{{ item.county }}</span>
              </div>
              <div class="price">
                <p>
                  ￥<span>{{ item.min_price }}-{{ item.max_price }}</span
                  >桌
                </p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
      <sidebar></sidebar>
    </div>
    <!-- 文章 -->
    <div class="qa-area container">
      <div class="qa-list">
        <div class="title">
          <div class="line"></div>
          <p><router-link to="/list/婚宴菜单">婚宴菜单</router-link></p>
          <div class="leiyao_more">
            <router-link to="/list/婚宴菜单">更多&gt;</router-link>
          </div>
        </div>
        <ul class="q-list">
          <li class="q-item" v-for="(item,i) in wedmenu1.slice(0,6)" :key="i">
            <router-link :to="`/scontent/${item.yid}`">{{item.title}}</router-link>
            <p><span></span>{{item.scan}}</p>
          </li>
        </ul>
      </div>
      <div class="qa-list">
        <div class="title">
          <div class="line"></div>
          <p><router-link to="/list/注意事项">婚宴注意事项</router-link></p>
          <div class="leiyao_more">
            <router-link to="/list/注意事项">更多&gt;</router-link>
          </div>
        </div>
        <ul class="q-list">
          <li class="q-item" v-for="(item,i) in wedmenu2.slice(0,6)" :key="i">
            <router-link :to="`/scontent/${item.yid}`">{{item.title}}</router-link>
            <p><span></span>{{item.scan}}</p>
          </li>
        </ul>
      </div>
      <div class="qa-list">
        <div class="title">
          <div class="line"></div>
          <p><router-link to="/list/婚庆指南">婚庆指南</router-link></p>
          <div class="leiyao_more">
            <router-link to="/list/婚庆指南">更多&gt;</router-link>
          </div>
        </div>
        <ul class="q-list">
          <li class="q-item" v-for="(item,i) in wedmenu3.slice(0,6)" :key="i">
            <router-link :to="`/scontent/${item.yid}`">{{item.title}}</router-link>
            <p><span></span>{{item.scan}}</p>
          </li>
        </ul>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import headerTop from "../components/leiyao/header";
import navBar from "../components/leiyao/navBar";
import ThreeStep from "../components/leiyao/threeStep";
import sidebar from "../components/leiyao/sidebar";
export default {
  components: {
    sidebar,
    headerTop,
    navBar,
    ThreeStep,
  },
  data() {
    return {
      results: "",
      NewResults: "",
      act: "全部",
      wedmenu1: [],
      wedmenu2: [],
      wedmenu3: [],
    };
  },
  methods: {
    LoadData(Sval) {
      console.log(Sval, 123);
      if (Sval) {
        return (this.results = Sval);
      }
      this.axios.get("/hotel").then((res) => {
        this.results = res.data.results;
        this.newResults = JSON.parse(JSON.stringify(res.data.results));
      });
    },
    LoadHotel(e) {
      /**本地筛选数据更改数据 */
      let val = JSON.parse(JSON.stringify(this.newResults));
      let value = e.target.innerHTML;
      this.act = value;
      if (value == "全部") {
        this.results = val;
      } else {
        this.results = val.filter((data) => {
          console.log(value, 123);
          return data.genre == value;
        });
      }
      /**异步请求方式更改数据 */
      // let value = e.target.innerHTML;
      // this.axios.get(`/classify?gender=${value}`).then((res) => {
      //   this.results = res.data.results;
      // });
    },
    // 加载攻略
    loadStrategy() {
      this.axios.get(`/strategy/titleimg`).then((res) => {
        this.wedmenu1 = res.data.filter((item) => {
          return item.subcat == "婚宴菜单";
        });
        this.wedmenu2 = res.data.filter((item) => {
          return item.subcat == "注意事项";
        });
        this.wedmenu3 = res.data.filter((item) => {
          return item.category == "婚姻法律";
        });
      });
    },
    // 加载攻略
    loadStrategy() {
      this.axios.get(`/strategy/titleimg`).then((res) => {
        this.wedmenu1 = res.data.filter((item) => {
          return item.subcat == "婚宴菜单";
        });
        this.wedmenu2 = res.data.filter((item) => {
          return item.subcat == "注意事项";
        });
        this.wedmenu3 = res.data.filter((item) => {
          return item.category == "婚姻法律";
        });
      });
    },
  },
  mounted() {
    this.LoadData();
    this.loadStrategy();
  },
};
</script>
<style scoped>
.hotel {
  margin-top: 30px;
}
/* hotel main */
.hotel > .main {
  width: 960px;
  float: left;
}

/* hotel title */
.hotel > .main > .title {
  height: 70px;
  display: flex;
  align-items: center;
}
.hotel .title .line {
  width: 3px;
  height: 24px;
  background-color: #f83244;
}
.hotel .title > .leiyao_more {
  margin-left: auto;
}
.hotel .title p {
  font-size: 24px;
  color: #333;
  margin-left: 14px;
}
.hotel .title > .leiyao_more a {
  font-size: 14px;
  color: #999;
}
/* tabs */
.hotel .tabs {
  height: 40px;
  display: flex;
  align-items: center;
  background: #fafafa;
  border: 1px solid #e8e8e8;
}
.hotel .tabs button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  height: 40px;
  width: 136px;
  color: #666;
  font-size: 14px;
  outline: none;
}
.hotel .tabs button:hover {
  border: 1px solid #e8e8e8;
  color: #f83244;
  border-top: 2px solid #f83244;
  background-color: #fff;
}
.holtelAct {
  border: 1px solid #e8e8e8 !important;
  color: #f83244 !important;
  border-top: 2px solid #f83244 !important;
  background-color: #fff !important;
}
.hotel .tabs .router-link-exact-active {
  color: #f83244;
  border-top: 2px solid #f83244;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  background-color: #fff;
}

/* 酒店列表 */
.hotel > .main > .hotel-list {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.hotel .hotel-list::after {
  content: "";
  flex: auto;
}
.hotel .hotel-list .hotel-item {
  display: flex;
  flex-direction: column;
  width: 228px;
  height: 228px;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  margin: 0px 16px 16px 0px;
}
.hotel .hotel-list .hotel-item:nth-child(4n) {
  margin-right: 0;
}
.hotel .hotel-list .hotel-item img {
  width: 100%;
  height: 142px;
}
.hotel .hotel-item .info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 13px;
}
.hotel .hotel-item .info > p {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #333;
  font-size: 14px;
}
.hotel .hotel-item .site {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #999;
}
.hotel .hotel-item .site span {
  margin-top: 6px;
}
.hotel .hotel-item .price {
  display: flex;
  color: #f83244;
  font-size: 14px;
  align-items: flex-end;
}
.hotel .hotel-item .price span {
  font-size: 16px;
}

/* qa-area */
.qa-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 70px;
}
.qa-area > .qa-list {
  width: 360px;
}

.qa-area > .qa-list > .title {
  margin-right: 30px;
  height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.qa-area > .qa-list > .title .line {
  width: 3px;
  height: 24px;
  background-color: #f83244;
}
.qa-area > .qa-list > .title > .leiyao_more {
  margin-left: auto;
}
.qa-area > .qa-list > .title p {
  font-size: 24px;
  color: #333;
  margin-left: 14px;
}
.qa-area > .qa-list > .title > .leiyao_more a {
  font-size: 14px;
  color: #999;
}

.qa-area > .qa-list > .q-list {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border-right: 1px dashed #ccc;
  padding-right: 30px;
}

.qa-area > .qa-list > .q-list > .q-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.qa-area > .qa-list > .q-list > .q-item > a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  color: #666666;
  width: 70%;
}
.qa-area > .qa-list > .q-list > .q-item > a:hover {
  color: #f83244;
}
.qa-area > .qa-list > .q-list > .q-item > p {
  font-size: 12px;
  color: #999;
}
.qa-area > .qa-list > .q-list > .q-item > p > span {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 6px;
  background: url(../../public/img/leiyao/o_1bs2jnka918h9n6d177i12dv7og7.png);
}
</style>
